<include file="/public/header" />
<style>
    .layui-input {
        height: 38px
    }

    .layui-form-item .layui-inline {
        margin-bottom: 0;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
            <div class="layui-form">
                <form class="layui-form layui-form-fixed">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input name="title" class="layui-input" type="text" placeholder="{:__('原材料名称')}" />
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <input type="hidden" name="color" class="blue layui-input">
                                <div lay-colorpicker="blue" data-value="#189fff"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <!-- // 默认搜索 -->
                            <button lay-add="{:url('/system/material/add')}" class="layui-btn layui-btn-normal"
                                lay-filter="submitIframe" type="button" lay-submit>添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-fluid layui-bg-white">
            <foreach $list as $vs>
            <button lay-add="{:url('/system/material/del')}?id={$vs.id}" data-reload="self" class="layui-btn layui-btn-primary" type="button"
                lay-filter="delIframe" lay-submit><span class="layui-badge-dot" style="background:{$vs.color}"></span>
                {$vs.title}<i class="layui-icon">&#xe640;</i></button>
            </foreach>
        </div>
    </div>
</div>

<include file="/public/footer" />
<script>
    layui.use(['admin', 'layer', 'table', 'form', 'tree'], function () {

        var admin = layui.admin;
        var layer = layui.layer;
        var table = layui.table;        // 表格
        var tree = layui.tree;          // 权限树
        var form = layui.form;
        // 监听权限提交
        form.on("submit(delIframe)", function (post) {
            var pageThat = layui.$(this),
                _pageUrl = pageThat.attr('lay-add');
            layer.confirm('确定要删除吗', function (index) {
                layui.$.post(_pageUrl, {}, function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            location.reload();
                        });
                    } else {
                        layer.error(res.msg);
                    }
                }, 'json');
                return false;
            })
        })
        // 监听权限提交
        form.on("submit(submitIframe)", function (post) {
            var pageThat = layui.$(this),
                _pageUrl = pageThat.attr('lay-add');
            // 开始POST提交数据

            if (!post.field.title) {
                layer.msg('请填写原材料名称', { icon: 3 });
                return false;
            }
            layui.$.post(_pageUrl,
                post.field, function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            location.reload();
                        });
                        pageThat.attr("disabled", true);
                    }
                    else {
                        layer.error(res.msg);
                    }

                }, 'json');

            return false;
        })
    });
</script>